<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('修改事项')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: ztree-css" />


    <link rel="stylesheet" th:href="@{/css/sku_style.css}"/>
    <style>
        body{height:auto;font-family: "Microsoft YaHei";}
        button{font-family: "SimSun","Helvetica Neue",Helvetica,Arial;}
        .ztree{
            position: absolute;
            z-index: 888;
            background-color: #eee;
            border: 1px solid #ccc;
            overflow: auto;
            width: 150px;
            min-height: 50px;
            max-height: 300px;
        }
        #tree_1{
            margin-left: -20px;
        }
        .tree_div,.mytree_div{
            position: relative;
        }

        .caret1,.caret2{
            float: right;
            position: absolute;
            margin-left: -15px;
            top: 10px;
        }
    </style>
</head>
<body class="white-bg">
<div class="container-div">
    <div class="demo-title">项目--事项配置</div>

    <div id="skuTable">
        <table class="skuTable">
            <thead>
            <tr>
                <th>序号</th>
                <th >办理流程</th>
                <th style="display: none">typeId</th>
                <th style="display: none">id</th>
                <th style="display: none">sort</th>
                <th>办理事项</th>
                <th style="display: none">orgStatus</th>
                <!--<th style="width: 150px;">单位类型</th>-->
                <th style="width: 170px;">负责单位</th>
                <!--<th>填报单位</th>-->
                <th>负责人</th>
                <th style="width: 80px;">红灯预警天数</th>
                <th style="width: 80px;">黄灯预警天数</th>
                <th style="width: 150px;">预计完成时间</th>
                <th style="display: none;">简介</th>
                <th style="display: none;">办理依据</th>
                <th style="display: none;">申报材料</th>
                <th style="display: none;">申报材料(附件)</th>
                <th style="display: none;">附件上传前的名称</th>
                <th style="display: none;">办事条件</th>
                <th style="display: none;">办理流程</th>
                <th style="display: none;">收费标准</th>
                <th style="display: none;">办理时间地址</th>
                <th style="width: 50px;">操作</th>
            </tr>
            </thead>
            <tbody id="mytbody">

            </tbody>
        </table>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: ztree-js" />

<script th:inline="javascript">
    var prefix = ctx + "linkong/project";
    var ids = [[${ids}]];
    var proId = [[${proId}]];
    var userId = [[${userId}]];
    var username = [[${username}]];
    var leader = [[${leader}]];
    var has_matter_flag = [[${has_matter_flag}]];
    console.log(has_matter_flag)
    var mydata = {};
    $(function (){
        $.ajax({
            url: prefix + "/selectMattersByIds",
            type: 'POST',
            data: {ids:ids,proId:proId},
            async: false,
            success: function (data) {
                mydata = data;
            }
        })
        listShow();
    })


    function listShow() {
        var str = "";
        var index = 1;
            for(var obj in mydata ){
                var myarr = mydata[obj];
                var len = myarr.length;
                str += '<tr>'
                    + '<td rowspan='+ len +'>'+ index + '</td>'
                    + '<td rowspan='+ len + '>'+ obj + '</td>';
                $.each(myarr, function (i, value){
                    var datestr = value.expectedDate == null ? "":value.expectedDate.substr(0,10)
                    datestr = has_matter_flag == "false"?"":datestr;
                    str += '<td style="display: none" class="type_id">' + value.typeId + '</td>'
                        + '<td style="display: none" class="item_id">' + value.id + '</td>'
                        + '<td style="display: none" class="sort">' + value.sort + '</td>'
                        + '<td class="m_name"> '+ value.name + '</td>'
                        + '<td style="display: none" class="orgStatus"> '+ value.orgStatus +  '</td>';

                       // str += '<td >' + proTypeName+'</td>';
                        if(value.orgStatus == '0'){ // 企业
                            str += '<td class="mainOrgname1"><input class="mainOrg" type="hidden" value="'+ userId + '" />'+ username +'</td>';
                            str += '<td class="approveUser"><div class="tree_div"><input class="approveUser" type="hidden" value="'+ userId +'"/><input type="hidden" name="approveUsername" readonly value='+ leader +'>' +
                                leader +  '</td>';

                        }else{
                            str +=  '<td class="mainOrgname2"><div class="mytree_div"><input class="mainOrg" value='+ value.mainOrg + ' type="hidden" /><input type="text" readonly name="mainOrgname" class="setting_sku_price myselect_tree" value='+ value.mainOrgname +'>' +
                                '<i class="caret caret1"></i><div id="my_tree'+ value.id +'" class="ztree" style="display: none"></div></div></td>';
                            str += '<td class="approveUser"><div class="tree_div"><input class="approveUser" type="hidden" value="'+ value.approveUser +'"/><input type="text" name="approveUsername" readonly class="setting_sku_price select_tree approveUsername" value='+ value.approveUsername +'>' +
                                '<i class="caret caret2"></i><div id="tree'+ value.id +'" class="ztree treeselect" style="display: none"></div></div></td>';
                        }


                    str +=  '<td class="redLightDays"><input type="text" class="setting_sku_price" value='+ value.redLightDays +'></td>'
                        + '<td class="yelLightDays" ><input type="text" class="setting_sku_price" value='+ value.yelLightDays +'></td>'
                        + '<td class="expectedDate"><div class="input-group date" style="border: 1px solid #ccc;"><span class="input-group-addon"><i class="fa fa-calendar"></i></span><input value="'+ datestr +'"  name="onlineTime" class="form-control" type="text"></div></td>'
                        + '<td style="display: none" class="matterContent" >' + value.matterContent + '</td>'
                        + '<td style="display: none" class="pursuant" >' + value.pursuant + '</td>'
                        + '<td style="display: none" class="applicationMaterials" >' + value.applicationMaterials + '</td>'
                        + '<td style="display: none" class="accessory" >' + value.accessory + '</td>'
                        + '<td style="display: none" class="accessoryOld" >' + value.accessoryOld + '</td>'
                        + '<td style="display: none" class="workConditions" >' + value.workConditions + '</td>'
                        + '<td style="display: none" class="handlingProcedures" >' + value.handlingProcedures + '</td>'
                        + '<td style="display: none" class="rates" >' + value.rates + '</td>'
                        + '<td style="display: none" class="timeAddress" >' + value.timeAddress + '</td>'
                        + '<td ><a href="javascript:;" style="color: #0d8ddb" class="remove_tr_btn" onclick="remove_btn('+ value.id + ',' +' \''+obj+'\' )">移除</a></td>'
                        + '</tr>';
                })

                index += 1;
            }
            $("#mytbody").html(str);
        $("input[name='onlineTime']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });
    }
    var removeIds = [];
    function remove_btn( id ,str){
        $.modal.confirm("确定删除这条事项吗？", function() {
            for(var obj in mydata ){
                if(obj == str){
                   var index =  mydata[str].findIndex(function(ele){;
                      return ele.id == id;
                    })
                    if(index != -1){
                        mydata[str].splice(index,1);
                    }
                    if(mydata[str].length == 0){
                        delete mydata[str];
                    }
                    removeIds.push(id);
                    listShow();

                }
            }
        });
    }
    var myid = "";var that = {}, ther = {};
    // 审批人点击
    $(document).on('click','.select_tree',function(){
        myid = $(this).parent().parent().prevAll('td.item_id').text();
        that = $(this);
        var url = ctx + "linkong/matter/treeData";
        var options = {
            id: 'tree' + myid,
            url: url,
            expandLevel: 0,
            expandAll: true,
            expandFirst:false,
            onClick : zOnClick
        };
        $.tree.init(options);
        $("#" + options.id).toggle(100);

    })
    // 单位点击
    $(document).on('click','.myselect_tree',function () {
        // var typeId = $(this).parent().parent().prevAll('td.m_type').find('select option:selected').val();
        myid = $(this).parent().parent().prevAll('td.item_id').text();

        var url = '';
        ther = $(this);
        url =  ctx + "system/dept/treeData";

        var options = {
            id: 'my_tree' + myid,
            url: url,
            expandLevel: 0,
            expandAll: true,
            expandFirst:false,
            onClick : zOnClick2
        };
        $.tree.init(options);
        $("#" + options.id).toggle(100);

    })


    function zOnClick2(event, treeId, treeNode) {
        var treeId = treeNode.id;
        var treeName = treeNode.name;
        ther.val(treeName);
        ther.prev('input.mainOrg').val(treeId);
        $("#my_tree" + myid).hide();
    }


    function zOnClick(event, treeId, treeNode) {
        var treeId = treeNode.id;
        var treeName = treeNode.name;
        that.val(treeName);
        that.prev('input.approveUser').val(treeId);
        $("#tree" + myid).hide();
    }


    function submitHandler() {
        var deleteIds = ";"
        if(removeIds.length > 0){
            deleteIds = removeIds.join(",");
        }
        var _dateflag = true;
        var params = [];
        $("#mytbody tr").each(function () {
            var temp = {};
            temp["projectId"] = proId;
            // var tr_list = $(this).children();//获取每一行
            $(this).children().each(function(index,ele){
                var classNmae = $(ele).attr('class');
                var t_text = $(this).text().trim();
                if (t_text === 'null'){
                    t_text = null;
                }
                switch (classNmae) {
                    case "type_id":
                        temp["typeId"] = t_text;
                        break;
                    case "item_id":
                        temp["id"] = t_text;
                        break;
                    case "sort":
                        temp["sort"] = t_text;
                        break;
                    case "orgStatus":
                        temp["orgStatus"] = t_text;
                        break;
                    case "mainOrgname1":
                        temp["mainOrg"] = $(this).find('input[class="mainOrg"]').val();
                        temp["mainOrgname"] = t_text;
                        break;
                    case "mainOrgname2":
                        temp["mainOrg"] = $(this).find('input[class="mainOrg"]').val();
                        temp["mainOrgname"] = $(this).find('input[name="mainOrgname"]').val();
                        break;
                    case "m_name":
                        temp["name"] = t_text;
                        break;
                    case "expectedDate":
                        var expectedDate =  $(this).find('input').val();
                        if(expectedDate == '' || expectedDate == null){
                            _dateflag = false;
                            $(this).find('input').css("border","1px solid red")
                        }else{
                            $(this).find('input').css("border","none")
                            _dateflag = true;
                        }
                        temp["expectedDate"] = expectedDate;
                        break;
                    case "approveUser":
                        temp["approveUser"] = $(this).find('input[class="approveUser"]').val();
                        temp["approveUsername"] = $(this).find('input[name="approveUsername"]').val();
                        break;
                    case "redLightDays":
                        temp["redLightDays"] = $(this).find('input').val();
                        break;
                    case "yelLightDays":
                        temp["yelLightDays"] = $(this).find('input').val();
                        break;
                    case 'matterContent':
                        temp["matterContent"] = t_text;
                        break;
                    case 'pursuant':
                        temp["pursuant"] = t_text;
                        break;
                    case 'applicationMaterials':
                        temp["applicationMaterials"] = t_text;
                        break;
                    case 'accessory':
                        temp["accessory"] = t_text;
                        break;
                    case 'accessoryOld':
                        temp["accessoryOld"] = t_text;
                        break;
                    case 'workConditions':
                        temp["workConditions"] = t_text;
                        break;
                    case 'handlingProcedures':
                        temp["handlingProcedures"] = t_text;
                        break;
                    case 'rates':
                        temp["rates"] = t_text;
                        break;
                    case 'timeAddress':
                        temp["timeAddress"] = t_text;
                        break;
                    default :

                        break;
                }

            })
            params.push(temp)
        })
        if(!_dateflag){
            return  $.modal.alertError("请完善事项预计完成时间")
        }
        // console.log(params)
        var options = {
            url: '/linkong/matterProject/saveBatch',
            type: "POST",
            dataType: 'json',
            data: {data: JSON.stringify(params),deleteIds:deleteIds,projectId:proId},
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍后...");
            },
            success: function (result) {
                if (result.code == 0) {

                    setTimeout(function () {
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                    }, 500);
                } else {
                    layer.msg("保存失败", {icon: 6});
                }
            },
            error: function () {
                layer.msg("出现错误 ，请重试", {icon: 6});
            }
        };
        $.ajax(options);
    }

</script>

</body>
</html>